<template>
  <div class="product">
    <!-- 顶部导航栏 -->
    <div class="header">
      <van-sticky>
        <van-nav-bar
          title="产品"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </van-sticky>
    </div>
    <!-- 中间产品展示区域 -->
    <div class="content_product">
      <!-- 左侧菜单栏 -->
      <div class="leftSideBar">
        <van-sidebar v-model="activeKey" @change="onChange">
          <van-sidebar-item
            v-for="category in categoryData"
            :key="category.id"
            :title="category.name"
          />
        </van-sidebar>
      </div>
      <!-- 右侧产品展示区域 -->
      <div class="rightProductArea">
        <van-card
          v-for="product in productData"
          :key="product.id"
          :price="product.price"
          :desc="product.description"
          :title="product.name"
          :thumb="product.photo"
        >
          <template #footer>
            <!-- 步进器 -->
            <van-stepper default-value="0" :min="0" v-model="product.number" @change="numberChangeHandler(product)" />
          </template>
        </van-card>
      </div>
    </div>
    <!-- 总价提交 -->
    <div class="submitBar">
      {{total}}
    </div>
  </div>
</template>

<script>
// 引入vuex辅助函数
import {mapActions, mapGetters, mapMutations, mapState} from 'vuex'
export default {
  data() {
    return {
      // 根据首页点击的索引 确定侧边菜单栏 默认被选中的是哪一个
      activeKey: this.$route.query.activeKey,
      // 首页点击跳转到产品页面时 传递的栏目id
      categoryId: this.$route.query.categoryId
    };
  },
  computed: {
    // 获取产品栏目的数据
    ...mapState('category',['categoryData']),
    // 获取产品数据
    ...mapState('product',['productData']),
    // 购物车总价
    ...mapGetters('shopcart',['total'])
  },
  methods: {
    // 引入获取产品栏目数据的方法
    ...mapActions('category',['getAllCategoryData']),
    // 引入根据栏目id获取产品数据的方法
    ...mapActions('product',['getAllProductData']),
    // 引入购物车模块的方法 
    ...mapMutations('shopcart',['addShopcart','clearShopcart']),
    // 获取产品栏目数据
    queryCategory(){
      // 定义参数
      let data = {
        page: 1,
        pageSize: 100
      }
      this.getAllCategoryData(data)
    },
    // 获取产品数据
    queryProduct(){
      let data = {
        page: 1,
        pageSize: 100,
        productCategoryId: this.categoryId
      }
      // 调用获取产品数据的方法
      this.getAllProductData(data)
    },
    // 切换侧边栏 获取不同的产品数据
    onChange(index) {
      // console.log(this.categoryData[index].id);
      // 当侧边栏切换的时候 动态的更新 categoryId
      this.categoryId = this.categoryData[index].id
      // 重新刷新页面数据
      this.queryProduct()
    },
    // 根据监听步进器的数量变化 拿到对应的产品的信息
    numberChangeHandler(product){
      // 定义一个产品参数
      let orderLine = {
        productId: product.id,
        productName: product.name,
        price: product.price,
        number: product.number
      }
      // console.log(orderLine);
      // 调用添加购物车的方法
      this.addShopcart(orderLine)
    },
    // 返回上一个页面
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  created() {
    // 自动获取产品栏目数据
    this.queryCategory()
    // 自动获取产品数据
    this.queryProduct()
  },
};
</script>

<style scoped>
/* 中间产品展示区域的样式 */
.content_product{
  display: flex;
}
/* 侧边导航栏区域的样式 */
.van-sidebar{
  width: 150px;
  text-align: center;
}
/* 右侧产品区域样式 */
.content_product .rightProductArea{
  flex: 1;
}
</style>